<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page language="java" pageEncoding="utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%@ include file="../../common/common.jsp" %>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>角色列表 - ${title }</title>
</head>
<link href="${ctx }/static/plugins/zTree_v3/css/zTreeStyle.css" rel="stylesheet"/>
<body
        <%@ include file="../../common/skin.jsp" %>
>
<%@ include file="../../common/head.jsp" %>
<%@ include file="../../common/menu.jsp" %>
<div class="J_content">
    <div class="mt20 plr20">
        <form action="${ctx }/member/list" id="queryForm" method="POST">
            <div class="J_toolsBar clearfix">
                <div class="t_label">角色名称</div>
                <%--<div class="t_text ml10">--%>
                    <select name="level"  class="t_text ml10">
                        <option value="" selected>--请选择--</option>
                        <option value="0" >常务副会长</option>
                        <option value="1">副会长</option>
                        <option value="2">常务理事</option>
                        <option value="3">理事</option>
                        <option value="4">集体会员</option>
                        <option value="5">个人会员</option>
                    </select>
                    <%--<input placeholder="请输入角色名称" type="text" name="name" value="${roleQueryDTO.name }"/>--%>
                <%--</div>--%>
                <div class="t_label">公司名称</div>
                <div class="t_text ml10">
                    <input placeholder="请输入公司名称" type="text" name="companyName"
                           value="${memberOfQueryDTO.companyName }"/>
                </div>
                <div class="t_label">手机号</div>
                <div class="t_text ml10">
                    <input placeholder="请输入手机号" type="text" name="phone" value="${memberOfQueryDTO.phone }"/>
                </div>
                <div class="t_button mgl30">
                    <a class="abtn red" href="javascript:myQuery();">
                        <i class="icon"></i>查询
                    </a>
                </div>
                <div class="t_button ml10">
                    <a class="abtn blue" href="javascript:myEdit();">
                        <i class="icon"></i>新增
                    </a>
                </div>
                <div class="t_label ml10">
                    记录数：<label style="color: red;" id="total">${page.totalCount }</label>
                </div>
            </div>
            <div class="J_toolsBar clearfix">
                <div class="t_button ml10">
                    <a class="abtn blue" href="javascript:allCheck('choice',true);">
                        <i class="icon"></i>全选
                    </a>
                </div>
                <div class="t_button ml10">
                    <a class="abtn blue" href="javascript:allCheck('choice',false);">
                        <i class="icon"></i>全不选
                    </a>
                </div>
                <div class="t_button ml10">
                    <a class="abtn blue" href="javascript:reserveCheck('choice');">
                        <i class="icon"></i>反选
                    </a>
                </div>
                <div class="t_button ml10">
                    <a class="abtn blue" href="javascript:sendMessage('choice');">
                        <i class="icon"></i>发送通知
                    </a>
                </div>
            </div>
            <div class="J_table mt20">
                <div class="t_table">
                    <table>
                        <thead>
                        <tr>
                            <td>
                                <span>选择  </span>
                            </td>
                            <td>
                                <span>序号</span>
                            </td>
                            <td>
                                <span>理事会员职称</span>
                            </td>
                            <td>
                                <span>联系人</span>
                            </td>
                            <td>
                                <span>联系人电话</span>
                            </td>
                            <td>
                                <span>公司名称</span>
                            </td>
                            <td>
                                <span>地区</span>
                            </td>
                            <td>
                                <span>会费缴纳</span>
                            </td>
                            <td>
                                <span>邮箱</span>
                            </td>
                            <td>
                                <span>创建时间</span>
                            </td>
                            <td>
                                <span>是否封存</span>
                            </td>
                            <td>
                                <span>操作</span>
                            </td>
                        </tr>
                        </thead>
                        <tbody>
                        <c:choose>
                            <c:when test="${page.list != null && page.totalCount > 0 }">
                                <c:forEach items="${page.list }" var="r" varStatus="status">
                                    <tr>
                                        <td class="first">
                                            <div class="t_text tc">
                                                <input type="checkbox" name="choice" value="${r.id}" id="choice" width="30px;"/>
                                            </div>
                                        </td>
                                        <td class="first">
                                            <div class="t_text tc">
                                                    ${status.index+1 }
                                            </div>
                                        </td>
                                        <td>
                                            <div class="t_text tc">
                                                    ${r.memberType == "0" ? "常务副会长" : r.memberType == "1" ? "副会长" : r.memberType == "2" ? "常务理事" : r.memberType == "3" ? "理事" : r.memberType == "4" ? "集体会员" : r.memberType == "5" ? "个人会员" : ""}
                                            </div>
                                        </td>
                                        <td>
                                            <div class="t_text tc">
                                                    ${r.linkman }
                                            </div>
                                        </td>
                                        <td>
                                            <div class="t_text tc">
                                                    ${r.phone }
                                            </div>
                                        </td>
                                        <td>
                                            <div class="t_text tc">
                                                    ${r.companyName }
                                            </div>
                                        </td>
                                        <td>
                                            <div class="t_text tc">
                                                    ${r.areaId }
                                            </div>
                                        </td>
                                        <td>
                                            <div class="t_text tc">
                                                    ${r.money }
                                            </div>
                                        </td>
                                        <td>
                                            <div class="t_text tc">
                                                    ${r.eMail }
                                            </div>
                                        </td>
                                        <td>
                                            <div class="t_text tc">
                                                <fmt:formatDate value="${r.createDate }" pattern="yyyy-MM-dd HH:mm:ss"/>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="t_text tc">
                                                <c:choose>
                                                    <c:when test="${r.deleteFlag eq '0' }">
                                                        <label class="normal_flag">正常</label>
                                                    </c:when>
                                                    <c:otherwise>
                                                        <label class="delete_flag">封存</label>
                                                    </c:otherwise>
                                                </c:choose>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="t_link">
                                                <a href="javascript:myEdit('${r.id }');"><i class="icon"></i>编辑</a>
                                                <c:choose>
                                                    <c:when test="${r.deleteFlag eq '0' }">
                                                        <a href="javascript:updDeleteFlag('${r.id }', '1');"><i
                                                                class="icon"></i>封存</a>
                                                    </c:when>
                                                    <c:otherwise>
                                                        <a href="javascript:updDeleteFlag('${r.id }', '0');"><i
                                                                class="icon"></i>恢复</a>
                                                    </c:otherwise>
                                                </c:choose>
                                            </div>
                                        </td>
                                    </tr>
                                </c:forEach>
                            </c:when>
                            <c:otherwise>
                                <tr>
                                    <td colspan="6">
                                        <div class="J_null mt40">
                                            <img src="${ctx }/static/images/null.png">
                                            <p>暂无相关数据</p>
                                        </div>
                                    </td>
                                </tr>
                            </c:otherwise>
                        </c:choose>
                        </tbody>
                    </table>
                </div>
                <%@ include file="../../common/pager.jsp" %>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="${ctx }/static/plugins/zTree_v3/js/jquery.ztree.all.min.js"></script>
<script type="text/javascript">
    <%--跳转页面到编辑页--%>
    function sendMessage(name) {
        var str = toMyString(name);
        if (str == null || str.length === 0) {
            layer.alert("请先勾选协会的理事单位");
            return;
        }
        $.post('${ctx}/message/transition?str=' + str, {}, function (str) {
            var loadIdx = layer.load();
            layer.close(loadIdx);
            layer.open({
                type: 1,
                area: ['600px', '400px'],
                content: str,
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    message();
                },
                btn2: function (index, layero) {
                    layer.close(index);
                }
            });
        });
    }
    function myEdit(id) {
        var loadIdx = layer.load();
        var title = '添加角色';
        if (!id) {
            id = '';
        } else {
            title = '修改角色';
        }
        $.post('${ctx}/member/findById?id=' + id, {}, function (str) {
            layer.close(loadIdx);
            layer.open({
                title: title,
                type: 1,
                area: ['600px', '400px'],
                content: str,
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    mySubmit();
                },
                btn2: function (index, layero) {
                    layer.close(index);
                }
            });
        });
    }
    //全选和全不选（第一个参数为复选框名称，第二个参数为是全选还是全不选）
    function allCheck(name,boolValue) {
        var allvalue = document.getElementsByName(name);
        for (var i = 0; i < allvalue.length; i++) {
            if (allvalue[i].type == "checkbox")
                allvalue[i].checked = boolValue;
        }
    }
    //反选 参数为复选框名称
    function reserveCheck(name){
        var revalue = document.getElementsByName(name);
        for(i=0;i<revalue.length;i++){
            if(revalue[i].checked == true)
                revalue[i].checked = false;
            else
                revalue[i].checked = true;
        }
    }

    //拼成字符串方便传递到后端控制层处理
    function toMyString(name){
        var myvalue = document.getElementsByName(name);
        var myName = "";
        for (var i = 0; i < myvalue.length; i++) {
            if(myvalue[i].checked){
                myName += myvalue[i].value+",";
            }
        }
        return myName;
    }
    function mySubmit() {
        $('#editForm').submit();
    }
    function message() {
        $('#message').submit();
    }

    function myQuery() {
        $('#queryForm').submit();
    }

    function updDeleteFlag(id, deleteFlag) {
        var ids = new Array();
        ids.push(id);

        var content = '';
        if (deleteFlag == '0') {
            content = '确定要恢复数据吗？';
        } else {
            content = '确定要封存数据吗？';
        }

        layer.confirm(content, function (index) {
            layer.close(index);

            var loadIdx = layer.load();
            $.ajax({
                url: '${ctx}/member/deleteById',
                type: 'post',
                data: {
                    'ids': ids,
                    'deleteFlag': deleteFlag
                },
                traditional: true,
                success: function (result) {
                    layer.close(loadIdx);
                    if (result.success) {
                        layer.alert('操作成功', function () {
                            window.location.reload();
                        });
                    } else {
                        layer.alert('操作失败');
                    }
                }
            });
        });
    }
</script>
</body>
</html>